<template>
  <div class="app-container">
    <div class="filter-container">
      <p style="float:left;margin-top:5px;margin-left:2%">商户姓名：</p>
      <el-input
        v-model="listQuery.shopName"
        size="small"
        placeholder="请输入商户姓名"
        style="width: 150px;float:left"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />

      <p style="float:left;margin-top:5px;margin-left:2%">商家账号：</p>
      <el-input
        v-model="listQuery.shopPhone"
        size="small"
        placeholder="请输入商家账号"
        style="width: 150px;float:left"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <p style="float:left;margin-top:5px;margin-left:2%">店铺地址：</p>
      <el-input
        v-model="listQuery.shopAddress"
        size="small"
        placeholder="请输入店铺地址"
        style="width: 150px;float:left"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />

      <p style="float:left;margin-top:5px;margin-left:2%">时间查询：</p>
      <el-date-picker
        v-model="listQueryDate"
        size="small"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
      ></el-date-picker>
      <el-button
        size="small"
        class="filter-item"
        type="success"
        icon="el-icon-search"
        style="margin-left:3%"
        @click="handleFilter"
      >搜索</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      size="small"
      border
      fit
      highlight-current-row
      style="width: 100%;margin-top:1%"
    >
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="商户姓名" min-width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.shopName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商家手机号" min-width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.shopPhone }}</span>
        </template>
      </el-table-column>

      <el-table-column label="店铺地址" min-width="200px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.shopAddress }}</span>
        </template>
      </el-table-column>

      <el-table-column label="订单总金额（元）" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.orderAmount }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column
        label="操作"
        align="center"
        min-width="200px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button size="small" align="center" type="primary" @click="handleUpdate(row)">查询订单详情</el-button>
        </template>
      </el-table-column>-->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <el-dialog
      :close-on-click-modal="false"
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      append-to-body
    >
      <el-row :gutter="20">
        <el-col :span="10" :offset="1">
          <div>订单编号：{{orderData.orderNum}}</div>
        </el-col>
        <el-col :span="10">
          <div>支付流水号:{{orderData.payNo}}</div>
        </el-col>
        <el-col :span="10" :offset="1">
          <div>订单状态：{{orderData.orderNum}}</div>
        </el-col>
        <el-col :span="10">
          <div>运费:{{orderData.payNo}}</div>
        </el-col>

        <el-col :span="10" :offset="1">
          <div>快递公司：{{orderData.orderNum}}</div>
        </el-col>
        <el-col :span="10">
          <div>快递单号:{{orderData.payNo}}</div>
        </el-col>
      </el-row>

      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="10" :offset="1">
          <div>买家账号：{{orderData.orderNum}}</div>
        </el-col>
        <el-col :span="10">
          <div>下单时间:{{orderData.payNo}}</div>
        </el-col>
        <el-col :span="10" :offset="1">
          <div>支付时间：{{orderData.orderNum}}</div>
        </el-col>
      </el-row>
      <el-divider></el-divider>

      <el-row :gutter="20">
        <div>收货人信息</div>
        <el-col :span="10" :offset="1">
          <div>收货人姓名：{{orderData.orderNum}}</div>
        </el-col>
        <el-col :span="10">
          <div>收货人电话:{{orderData.payNo}}</div>
        </el-col>
        <el-col :span="10" :offset="1">
          <div>收货地址：{{orderData.orderNum}}</div>
        </el-col>
      </el-row>>
      <el-divider></el-divider>

      <el-row :gutter="20">
        <div>发货人信息</div>
        <el-col :span="10" :offset="1">
          <div>发货人姓名：{{orderData.orderNum}}</div>
        </el-col>
        <el-col :span="10">
          <div>发货人电话:{{orderData.payNo}}</div>
        </el-col>
        <el-col :span="10" :offset="1">
          <div>发货地址：{{orderData.orderNum}}</div>
        </el-col>
      </el-row>>
      <el-divider></el-divider>

      <div>
        <div>商品信息</div>
        <template>
          <el-table
            :data="orderData.list"
            size="small"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column prop="proName" label="商品名称" width="180"></el-table-column>
            <el-table-column label="商品图片" width="180">
              <template slot-scope="scope">
                <img :src="scope.row.proImageUrl" style="width：100px;height:100px" />
                <!-- <el-image
      style="width: 100px; height: 100px"
      :src="scope.row.proImageUrl"
                ></el-image>-->
              </template>
            </el-table-column>
            <el-table-column prop="address" label="单价（元）"></el-table-column>
            <el-table-column prop="address" label="实际支付金额（元）"></el-table-column>
            <el-table-column prop="address" label="数量" width="80"></el-table-column>
            <el-table-column prop="address" label="服务费比例" width="100"></el-table-column>
            <el-table-column prop="address" label="收取服务费（元）"></el-table-column>
          </el-table>
        </template>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">返回</el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
        >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 异步请求 delLly
import { shopOrderGroup } from "@/api/trade/shoporderReq";
import Vue from "vue";
import Pagination from "@/components/Pagination"; // 分页插件

const calendarTypeOptions = [
  {
    key: "10",
    display_name: "待付款"
  },
  {
    key: "20",
    display_name: "代发货"
  },
  {
    key: "40",
    display_name: "待收货"
  },
  {
    key: "50",
    display_name: "已完成"
  }
];
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name;
  return acc;
}, {});

export default {
  inject: ["reload"],
  components: {
    Pagination
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    }
  },
  data() {
    return {
      radio: 1,
      sample: [],
      listQueryDate: [], //筛选时间
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        status: "",
        sort: "+id"
      },
      temp: {
        id: undefined
      },
      dialogFormVisible: false,
      calendarTypeOptions,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "添加"
      },
      orderData: {} //订单详情
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取list
    getList() {
      this.listLoading = true;
      var params = Object.assign({}, this.listQuery);
      params.pageNum = this.listQuery.pageNum - 1;
      shopOrderGroup(params).then(response => {
        this.list = response.data.content;
        this.total = response.data.totalElements;
        this.listLoading = false;
      });
    },

    handleUpdate(row) {
      this.temp = Object.assign({}, row); // copy obj
      this.dialogFormVisible = true;
      this.orderListDetail(this.temp.orderNum);
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.listQuery.beginDate = this.listQueryDate[0];
      this.listQuery.endDate = this.listQueryDate[1];
      this.getList();
    },

    // 查询订单详情
    orderListDetail(orderNum) {
      let formData = {
        orderNum: orderNum
      };
      orderListDetail(formData).then(res => {
        console.log("xiangq", res.data);
        this.orderData = res.data;
      });
    }
  }
};
</script>
<style scoped>
</style>
